<template>
  <div class="loginBox">
    <div class="login">
      <div class="login_center">
        <div class="text">Log In</div>
        <!--脸书按钮 -->
        <fb-signin-button
          class="loginbtn cursor"
          :params="fbSignInParams"
          @success="onSignInSuccess2"
          @error="onSignInError2"
        >
          <div class="imgbox">
            <img src="../../assets/homeimg/组 7747.png" alt="" />
          </div>
          <div class="partyname">Continue With Facebook</div>
        </fb-signin-button>
        <!-- 谷歌登陆 -->
        <g-signin-button
          class="loginbtn cursor"
          style="background: #ea5a40"
          :params="googleSignInParams"
          @success="onSignInSuccess"
          @error="onSignInError"
        >
          <div class="imgbox" style="background: #bd432d">
            <img src="../../assets/homeimg/组 7743.png" alt="" />
          </div>
          <div class="partyname">Continue With Google</div>
        </g-signin-button>

        <div class="clause">
          If you continue，you are agreeing <br />
          to the <span>Terms Of Service</span> and <span>Privacy Policy</span>
        </div>
      </div>
      <!-- 叉叉取消按钮 -->
      <i @click="cancelFn" class="el-icon-close cancel cursor"></i>
    </div>
  </div>
</template>

<script>
import { LoginApi } from "../../requery/api";
export default {
  data() {
    return {
      photoUrl: false,
      //谷歌代理
      googleSignInParams: {
        client_id:
          "42993185366-lvbq108djn7cas9r3eesb8j80rjsh3vp.apps.googleusercontent.com",
      },
      //脸书代理
      fbSignInParams: {
        scope: "email,user_likes",
        return_scopes: true,
      },
      response: [],
    };
  },
  methods: {
    // 点击取消登陆模态框
    cancelFn(e) {
      this.$emit("cancelFn", e);
    },
    // 脸书
    onSignInSuccess2(e) {
      // FB.api("/me?fields=name,first_name,last_name,email", function (response) {
      FB.api(
        "/me?fields=name,first_name,last_name,email,phone,posts",
        function (response) {
          console.log(response, "resresres");
        }
      );
      console.log(e);
      // 返回后端登陆
      LoginApi({
        uuid: e.authResponse.userID,
        type: 0,
        nickname: '',
        photo: "",
        email: '',
      }).then((res) => {
        console.log(res);
        if (res.code == 201) {
          localStorage.setItem("token", res.data.token);
          this.cancelFn(1);
          setTimeout(() => {
            FB.api("/me/permissions", "DELETE", function (res) {
              // 用戶登出
              FB.logout();
            });
            // this.$router.gp(0);
          }, 1500);
        } else {
          FB.api("/me/permissions", "DELETE", function (res) {
            // 用戶登出
            FB.logout();
          });
        }
      });
    },
    onSignInError2() {},
    //谷歌登陆
    onSignInSuccess(googleUser) {
      var profile = googleUser.getBasicProfile();
      console.log(profile);
      console.log("Full Name: " + profile.getName());
      console.log("Image URL: " + profile.getImageUrl());
      console.log("Email: " + profile.getEmail());
      console.log("ID: " + profile.getId());
      LoginApi({
        uuid: profile.getId(),
        type: 1,
        nickname: profile.getName(),
        photo: profile.getImageUrl(),
        email: profile.getEmail(),
      }).then((res) => {
        console.log(res, "eeeeeeee");
        if (res.code == 201) {
          localStorage.setItem("token", res.data.token);
          localStorage.setItem("photoURL", res.data.photo);
          // this.$message({
          //   message: "Login successful",
          //   type: "success",
          // });
          this.cancelFn(1);
          setTimeout(() => {
            // 谷歌退出登陆
            googleUser.disconnect();
            // this.$router.go(0);
          }, 1500);
        } else {
          googleUser.disconnect();
          // this.$message.error(res.message);
        }
      });
      window.onbeforeunload = function (e) {
        gapi.auth2.getAuthInstance().signOut();
      };
    },
    //谷歌登陆失败
    onSignInError(error) {
      console.log("OH NOES", error);
    },
  },
};
</script>
 
<style lang = "less" scoped>
.loginBox {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
  .login {
    width: 400px;
    height: 320px;
    background-color: #fff;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    border-radius: 8px;
    padding: 36px 56px 47px;
    box-sizing: border-box;
    .login_center {
      width: 287px;
      height: 100%;
      /* background-color: #909; */
      .text {
        font-size: 18px;
        font-weight: 500;
        color: #333333;
        text-align: center;
        margin-bottom: 37px;
      }
      .loginbtn {
        width: 287px;
        height: 45px;
        background: #346396;
        border-radius: 6px;
        overflow: hidden;
        font-size: 12px;
        color: #ffffff;
        display: flex;
        margin-bottom: 21px;
        .imgbox {
          width: 50px;
          height: 45px;
          background: #204266;
          img {
            width: 27px;
            height: 27px;
            margin: 9px 12px;
          }
        }
        .partyname {
          width: 237px;
          text-align: center;
          line-height: 45px;
        }
      }
      .clause {
        font-size: 12px;
        line-height: 18px;
        color: #999999;
        width: 287px;
        margin-top: 40px;
        text-align: center;
        span {
          color: #5486e5;
        }
      }
    }
    .cancel {
      font-size: 28px;
      position: absolute;
      right: 30px;
      top: 30px;
    }
  }
}
</style>